<template>
  <div>
       <el-button @click="willAdd" type="primary">添加</el-button>
     <list-vue @willUpdate="willUpdate" :arr="arr" @init="getlist"></list-vue>

           <el-pagination
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="size"
    >
    </el-pagination>
      <form-vue :info="info" :arr="arr" @init="getlist" ref="form"></form-vue>

  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import listVue from './components/list.vue';
import formVue from './components/form.vue';
import {toggle} from '../../mixins'
import { requserlist, requsercount } from '../../http/api';



export default {
  components:{
    listVue,
    formVue
  },
   mixins:[toggle],
  props: [],
  data() {
    return {
     
      arr:[],
      total:0,
      size:2,
      page:1
    };
  },
  computed: {
    ...mapGetters({}),
  },
  mounted() {
    this.getlist();
  },
  methods: {
    ...mapActions({}),
    requestList(){
      //请求列表
      requserlist({
        page:this.page,
        size:this.size,
      }).then((res)=>{
        if(res.data.code==200){
          let arr = res.data.list ? res.data.list:[]

if(this.page!=1 && arr.length==0){
  this.page--;
  this.requestList();
  return;
}

          this.arr = arr
        }
      })
    },
    //请求列表
    getlist(){
      //请求列表
      this.requestList();
      //请求总数
      requsercount().then((res)=>{
        if(res.data.code==200){
          this.total = res.data.list[0].total;
        }
      })
    },
    //页码发生了改变
    changePage(e){
      this.page=e;
      this.requestList()
    }
  },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
.el-button{
  margin: @margin20 0;
}
</style>




